import React from 'react';
import 'styles/data-center/report/graphic-report/report-overview-simple.scss';
import ReportWrapper from "./report-wrapper";

const { PropTypes } = React;

/**
 * 报表概览缩小版，少于等于三个时可以使用
 */

@ReportWrapper
class ReportOverviewSimple extends React.Component {
  constructor(props) {
    super(props);
  }

  renderItem = (item) => {
    const { title, detail } = item;
    return (
      <div className='overview-card-wrapper'>
        <div className="card-title">
          {title}
        </div>
        <div className="card-detail">
          {detail}
        </div>
      </div>
    )
  };

  render() {
    const {
      data,
      height
    } = this.props;
    let className = 'report-overview-wrapper';
    if (data.length >= 3) {
      className += ' space-between';
    }
    return (
      <div className="report-overview-simple"
           style={{height: height + 'px'}}>
        <div className={className}>
          {data.map(this.renderItem)}
        </div>
      </div>
    );
  }

  static propsType = {
    data: PropTypes.array,
    height: PropTypes.number,
  }

  static defaultProps = {
    height: 324,
    data: [],
  }

}


export default ReportOverviewSimple;



